<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="">
    <title></title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <% include("../inc/input_css.html"){}%>
    <style>
        .control-label{
            width: 140px!important;
        }
    </style>

</head>
<body>
<div class="ibox">
    <div class="ibox-title">
        <div class="pull-left mbx navbar_title">
            <span class="current">图片管理</span>
            <span class="line">/</span>
            <span class="current"><a href="list">图集列表</a></span><span class="line">/</span>
            编辑图集列表
        </div>
    </div>
    <div class="ibox-content">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="padding-40">
                    <form action="save" method="post" class="form-horizontal form-validate">
                        <input type="hidden" name="pics.id" value="${pics.id!}" class="text"/>
                        <input type="hidden" name="sid" value="${sid!}" class="text"/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="maroon">*</span>名称</label>
                                <div class="col-sm-3">
                                    <input type="text" name="pics.name" value="${pics.name!}" class="form-control light-input" maxlength="15" required="true">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注</label>
                                <div class="col-sm-3">
                                    <input type="text" name="pics.memo" value="${pics.memo!}" class="form-control light-input" maxlength="15">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">封面图片</label>
                                <div class="col-sm-3">
                                    <input type="hidden" name="pics.imgurl" value="${friendlink.logo!}" class="pull-left form-control light-input"/>
                                    <img class="img-rounded" src="${pics.imgurl!}" style="max-height:50px;"/>
                                    <input type="button" class="button browserButton" value="选择文件"/>
                                    <span class="help-block"><span class="maroon"></span>建议300*300像素；格式jpg</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="maroon">*</span>排序</label>
                                <div class="col-sm-3">
                                    <input type="text"  name="pics.order"  value="${pics.order!50}" class="form-control light-input" required="true">
                                </div>
                            </div>
                        <table id="picsTable" class="input">
                            <tr>
                                <td>
                                    &nbsp;
                                </td>
                                <td colspan="5">
                                    <div href="javascript:(0);" id="addPicsItemButton" class="button hive-btn hive-btn-primary margin-left-15"><i class="icon-add" aria-hidden="true"></i>增加图集内容</div>
                                </td>
                            </tr>
                            <tr class="" style="background-color: #f8f8f8">
                                <td>&nbsp;</td>
                                <td>图片标题</td>
                                <td>图片描述</td>
                                <td>图片值</td>
                                <td>图片排序</td>
                                <td>删除</td>
                            </tr>
                            <%if(isNotEmpty(picsItems)){%>
                                <%for(list in picsItems){%>
                                    <tr class="picsValueTr">
                                        <td>
                                            &nbsp;
                                        </td>
                                        <td>
                                            <input type="text" name="picsItem[${listLP.index-1}].name" value="${list.name!}" class=" picsItemName form-control light-input" style="width: 180px" />
                                            <input type="hidden" name="picsItem[${listLP.index-1}].id" value="${list.id!}" class="text picsItemName" maxlength="200" />
                                        </td>
                                        <td>
                                            <textarea name="picsItem[${listLP.index-1}].desc" class="picsItemName form-control light-input" style="width: 200px;height:60px" maxlength="400" >${list.desc!}</textarea>
                                        </td>
                                        <td>
                                            <span class="fieldSet">
                                                <input type="hidden" name="picsItem[${listLP.index-1}].image" value="${list.image!}" class="text picsItemImage" maxlength="200" />
                                                <img class="img-rounded" src="${list.image!}" style="max-height:50px;"/>
                                                <input type="button" class="button browserButton" value="选择文件" />
                                            </span>
                                        </td>
                                        <td>
                                            <input type="text" name="picsItem[${listLP.index-1}].order" value="${list.order!}" class=" picsItemOrder form-control light-input" maxlength="9" style="width: 50px;" />
                                        </td>
                                        <td>
                                            <a href="javascript:void(0)" class="deletePicsItem icon-delete hive_icon color_danger" data-toggle="tooltip" data-placement="top" title="删除"></a>
                                        </td>
                                    </tr>
                                <%}%>
                            <%}else{%>
                            <tr class="picsValueTr">
                                <td>
                                    &nbsp;
                                </td>
                                <td>
                                    <input type="text" name="picsItem[0].name" class=" picsItemName form-control light-input" style="width: 180px"/>
                                </td>
                                <td>
                                    <textarea name="picsItem[0].desc" class=" picsItemName form-control light-input" style="width: 200px;height:60px" maxlength="400" ></textarea>
                                </td>
                                <td>
                                    <span class="fieldSet">
                                        <input type="hidden" name="picsItem[0].image" class="text picsItemImage" maxlength="200" />
                                        <img class="img-rounded" src="" style="max-height:50px;"/>
                                        <input type="button" class="button browserButton" value="选择文件" />
                                    </span>
                                </td>
                                <td>
                                    <input type="text" name="picsItem[0].order" class="picsItemOrder form-control light-input"  maxlength="9" style="width: 50px;" />
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="deletePicsItem icon-delete hive_icon color_danger" data-toggle="tooltip" data-placement="top" title="删除"></a>
                                </td>
                            </tr>
                            <%}%>
                        </table>

                        <div class="form-group" style="margin-top: 24px;text-align: center">
                            <label class="col-sm-2 control-label "></label>
                            <div class="col-sm-4 col-sm-offset-0">
                                <button class="hive-btn-cancle" id="btn_cancle" type="button" onclick="history.back()">&nbsp;取消&nbsp;</button>
                                <button class="hive-btn hive-btn-primary margin-left-8" type="submit">&nbsp;提交&nbsp;
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<% include("../inc/input_js.html"){}%>

<!-- 自定义js -->
<script src="/res/js/jquery-migrate-1.2.1.js"></script><!--jquery1.9 以上补丁-->
<script type="text/javascript">
    var uploadUrl="/file/uploadfile?shopId=${shopId!}&type=d";
    var browserUrl="/file/browser?shopId=${shopId!}";
</script>
<script src="https://static.9hive.cn/global/vendor/file/file.js"></script>
<script type="text/javascript">
    $(function () {
        $("input.browserButton").browser();
    })


</script>
<script type="text/javascript">
    $().ready(function() {
        var $inputForm = $("#inputForm");
        var $picsTable = $("#picsTable");
        var $type = $("#type");
        var $addPicsItemButton = $("#addPicsItemButton");
        var $deletePicsItem = $("a.deletePicsItem");
        var picsValueIndex = ${nums!1};

        // 修改规格类型
        $type.change(function() {
            if ($(this).val() == "text") {
                $("input.picsItemImage").val("").prop("disabled", true);
                $("input.browserButton").prop("disabled", true);
            } else {
                $("input.picsItemImage").prop("disabled", false);
                $("input.browserButton").prop("disabled", false);
            }
        });


        // 增加规格值
        $addPicsItemButton.click(function() {
            if ($type.val() == "text") {
                var trHtml = '<tr class="picsValueTr"> <td> &nbsp; <\/td> <td> <input type="text" name="picsItem[' + picsValueIndex + '].name"  class="picsItemName form-control light-input" style="width: 180px" \/> <\/td><td> <textarea name="picsItem[' + picsValueIndex + '].desc" maxlength="200" class="text picsItemName form-control light-input" /> <\/td> <td> <span class="fieldSet"> <input type="text" name="picsItem[' + picsValueIndex + '].image" maxlength="200" class="text picsItemImage" disabled="disabled" \/> <input type="button" class="button browserButton" value="选择文件" disabled="disabled" \/> <\/span> <\/td> <td> <input type="text" name="picsItem[' + picsValueIndex + '].order" maxlength="9" class="text picsItemOrder" style="width: 30px;" \/> <\/td> <td> <a href="javascript:;" class="deletePicsItem">[删除]<\/a> <\/td> <\/tr>';
            } else {
                var trHtml = '<tr class="picsValueTr"> <td> &nbsp; <\/td> <td> <input type="text" name="picsItem[' + picsValueIndex + '].name"  class="picsItemName form-control light-input" style="width: 180px" \/> <\/td><td> <textarea name="picsItem[' + picsValueIndex + '].desc"  class="picsItemName form-control light-input" style="width: 200px;height:60px" maxlength="400" ></textarea> <\/td> <td> <span class="fieldSet"> <input type="hidden" name="picsItem[' + picsValueIndex + '].image" class="text picsItemImage" maxlength="200" \/><img class="img-rounded" src="" style="max-height:50px;"/> <input type="button" class="button browserButton" value="选择文件" \/> <\/span> <\/td> <td> <input type="text" name="picsItem[' + picsValueIndex + '].order" class=" picsItemOrder form-control light-input" maxlength="9" style="width: 50px;" \/> <\/td> <td> <a href="javascript:void(0)" class="deletePicsItem icon-delete hive_icon color_danger" data-toggle="tooltip" data-placement="top" title="删除"></a> <\/td> <\/tr>';
            }
            $picsTable.append(trHtml).find("input.browserButton:last").browser();
            picsValueIndex ++;
        });

        // 删除规格值
        $deletePicsItem.live("click", function() {
            var $this = $(this);
            if ($picsTable.find("tr.picsValueTr").size() <= 1) {
                //$.message("warn", "必须至少保留一个图片值");
                layer.msg("必须至少保留一个图片值");
            } else {
                $this.closest("tr").remove();
            }
        });

        $.validator.addClassRules({
            picsItemName: {
                required: true
            },
            picsItemImage: {
                required: true
            },
            picsItemOrder: {
                digits: true
            }
        });

        // 表单验证
        $inputForm.validate({
            rules: {
                name: "required",
                order: "digits"
            }
        });

    });
</script>
</body>
</html>